<template>
  <div :class="className" style="width: 100%;height: 400px;"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  props: {
      chartData:{
      type: Object,
      default: {}
    },
    className: {
      type: String,
      default: 'chart'
    },
  },
  watch: {
      chartData: function (value, oldValue) {
          if(value!=null && value!=undefined){
              this.initChart(value);
          }
      }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
        this.chartData
        let legendData = this.chartData.legendData || [];
        let seriesData =  this.chartData.seriesData || [];
        this.chart = echarts.init(this.$el, 'macarons');
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'+'单'
            },
            legend: {
                show:legendData.length>1,
                orient: 'vertical',
                x: 'left',
                data: legendData
            },
            calculable: true,
            series: [
                {
                    name: '客单价分布统计',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: [350, 200],
                    avoidLabelOverlap: false,
                    data: seriesData,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                }
            ]
        };
        this.chart.setOption(option);


    }
  }
}
</script>
